### 第20课 网页远程监测光照值
在智慧校园的建设中，环境监测是提升教学环境舒适度、优化能源管理的重要环节。光照强度直接影响学生的学习效率和视觉健康，合理调控教室照明不仅能节能减排，还能创造更适宜的学习环境。
这一课，我们将掌握物联网环境监测的核心技术，实现教室光照强度的实时可视化，为智能照明、节能管理等应用提供基础方案，助力绿色智慧校园建设。
#### 20.1 工作原理
1. 数据采集
光敏电阻分压 → ESP32的ADC引脚（模拟转数字）
2. 数据处理
ESP32 → 路由器 → 手机/电脑
3. 网页交互
浏览器请求 → 服务器响应 → 返回光照数值并刷新显示
#### 20.2 流程图
#### 20.3 实验代码
⚠️ **特别提醒： 打开代码文件后，需要分别将代码中的 `YourWiFiSSID` 和 `YourWiFiPassword` 替换为您自己的 WiFi名称 和 WiFi密码。**
```c++
const char* ssid = "YourWiFiSSID"; // 修改为你的WiFi名称
const char* password = "YourWiFiPassword"; // 修改为你的WiFi密码
```
⚠️ **特别注意：请确保代码中的WiFi名称和WiFi密码与连接到您的电脑、手机/平板、ESP32开发板和路由器的网络相同，它们必须在同一局域网（WiFi）内。**
⚠️ **特别注意：WiFi必须是2.4Ghz频率的，否则ESP32无法连接WiFi。**
```c++
#include
#include
#include
#include
// 设置WiFi名称和WiFi密码
const char* ssid = "YourWiFiSSID"; // 修改为你自己的WiFi名称
const char* password = "YourWiFiPassword"; // 修改为你自己的WiFi密码
WebServer server(80); // 创建Web服务器对象，端口80
// 光敏电阻连接的引脚
const int lightSensorPin = 34;
// 存储传感器值
int sensorValue = 0;
// OLED 配置
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1 // 共享 I2C 重置操作
#define I2C_ADDRESS 0x3C // 默认0x3C地址
// 创建一个显示对象
Adafruit_SH1106G display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
void setup() {
Serial.begin(9600);
Wire.begin(); // 初始化I2C总线
// 初始化 OLED
if(!display.begin(I2C_ADDRESS, true)) { // 真正的分辨率是 128x64
Serial.println("SH1106初始化失败");
while(1); // 陷入困境且无法继续前进
}
// 清空屏幕并设置文本属性
display.clearDisplay();
display.setTextSize(1); // 文本尺寸
display.setTextColor(SH110X_WHITE); // 单色显示
display.setCursor(0, 0); // 设定起始位置
// 连接WiFi
WiFi.begin(ssid, password);
Serial.println("正在连接WiFi...");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi已连接");
Serial.println("IP: ");
Serial.println(WiFi.localIP());
display.print("IP: ");
display.println(WiFi.localIP());
display.display();
// 设置路由器
server.on("/", handleRoot); // 返回HTML页面
server.on("/readLight", handleLightRead); // 返回传感器数据
// 启动服务器
server.begin();
Serial.println("HTTP服务器已启动.");
}
void loop() {
server.handleClient();
}
void handleRoot() {
String html = R"=====(
ESP32 光敏传感器
ESP32 光敏传感器
--
)=====";
server.send(200, "text/html", html);
}
void handleLightRead() {
sensorValue = analogRead(lightSensorPin); // 读取光照值
String valueStr = String(sensorValue);
server.send(200, "text/plain", valueStr); // 返回纯文本数据
Serial.println("光照强度: " + valueStr);
}
```
#### 20.4 代码说明
**注意：此课程涉及HTML、CSS、JS等课外知识， 只做简单介绍。**
**1. 初始化阶段**
```c++
#include
#include
#include
#include
// 设置WiFi名称和WiFi密码
const char* ssid = "YourWiFiSSID"; // 修改为你的WiFi名称
const char* password = "YourWiFiPassword"; // 修改为你的WiFi密码
WebServer server(80); // 创建Web服务器对象，端口80
// 光敏电阻连接的引脚
const int lightSensorPin = 34;
```
- 引入WiFi、WebServer、Adafruit_GFX和Adafruit_SH110X库，配置网络和硬件引脚。
**2. 主程序逻辑**
```c++
void setup() {
// 初始化串口和WiFi连接
WiFi.begin(ssid, password);
// 设置路由器
server.on("/", handleRoot); // 返回HTML页面
server.on("/readLight", handleLightRead); // 返回传感器数据
server.begin(); // 启动服务器
}
void loop() {
server.handleClient(); // 持续处理客户端请求
}
```
- 启动服务器后，循环处理网页请求。
**3. 网页交互**
**HTML页面**
```c++
server.on("/", handleRoot);
```
```c++
void handleRoot() {
String html = R"=====(
...